import './comment-demo.css';
import React, { useState,useRef } from 'react';
import avatar from './images/bozai.png';
import orderBy from 'lodash/orderBy';
import { v4 as uuidV4 } from 'uuid';
import dayjs from 'dayjs';

/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
];
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
};

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
];

function CommentDemo() {
  // 导航 Tab 高亮的状态
  const [activeTab, setActiveTab] = useState('hot');
  const [list, setList] = useState(defaultList);

  // 删除评论
  const onDelete = rpid => {
    // 如果要删除数组中的元素，需要调用 filter 方法，并且一定要调用 setList 才能更新状态
    setList(list.filter(item => item.rpid !== rpid));
  };

  const onToggle = type => {
    setActiveTab(type);

    let newList;
    if (type === 'time') {
      // 按照时间降序排序
      // orderBy(对谁进行排序, 按照谁来排, 顺序)
      newList = orderBy(list, 'ctime', 'desc');
    } else {
      // 按照喜欢数量降序排序
      newList = orderBy(list, 'like', 'desc');
    }
    setList(newList);
  };

  // 发表评论
  const [content, setContent] = useState('');
  const inputRef = useRef(null);
  const handlePinlun = () => {
    setList([
      ...list,
      {
        // rpid: 100,
        // rpid: list.length+1,
        rpid: uuidV4(),
        // user: user,
        user,
        content: content,
        ctime: dayjs().format('MM-DD hh:mm'),
        like: 66,
      },
    ]);
    // 清空输入框
    setContent('');
    // 输入框聚焦 dom-focus
    inputRef.current.focus()
  };

  // console.log('activeTab', activeTab);
  // console.log('list', list);
  return (
    <div className='comment_demo'>
      {/* 导航 Tab */}
      <div className='reply-navigation'>
        <ul className='nav-bar'>
          <li className='nav-title'>
            <span className='nav-title-text'>评论</span>
            {/* 评论数量 */}
            <span className='total-reply'>{defaultList.length}</span>
          </li>
          <li className='nav-sort'>
            {/* 高亮类名： active */}
            {tabs.map(item => {
              return (
                <div
                  key={item.type}
                  className={item.type === activeTab ? 'nav-item active' : 'nav-item'}
                  onClick={() => onToggle(item.type)}
                >
                  {item.text}
                </div>
              );
            })}
          </li>
        </ul>
      </div>

      <div className='reply-wrap'>
        {/* 发表评论 */}
        <div className='box-normal'>
          {/* 当前用户头像 */}
          <div className='reply-box-avatar'>
            <div className='bili-avatar'>
              <img className='bili-avatar-img' src={avatar} alt='用户头像' />
            </div>
          </div>
          <div className='reply-box-wrap'>
            {/* 评论框 */}
            <textarea
              className='reply-box-textarea'
              placeholder='发一条友善的评论'
              ref={inputRef}
              value={content}
              onChange={e => setContent(e.target.value)}
            />
            {/* 发布按钮 */}
            <div className='reply-box-send'>
              <div className='send-text' onClick={handlePinlun}>
                发布
              </div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className='reply-list'>
          {/* 评论项 */}
          {list.map(item => (
            <div key={item.rpid} className='reply-item'>
              {/* 头像 */}
              <div className='root-reply-avatar'>
                <div className='bili-avatar'>
                  <img className='bili-avatar-img' alt='' src={item.user.avatar} />
                </div>
              </div>

              <div className='content-wrap'>
                {/* 用户名 */}
                <div className='user-info'>
                  <div className='user-name'>{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className='root-reply'>
                  <span className='reply-content'>{item.content}</span>
                  <div className='reply-info'>
                    {/* 评论时间 */}
                    <span className='reply-time'>{item.ctime}</span>
                    {/* 评论数量 */}
                    <span className='reply-time'>点赞数:{item.like}</span>
                    {user.uid === item.user.uid && (
                      <span className='delete-btn' onClick={() => onDelete(item.rpid)}>
                        删除
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
export default CommentDemo;
